<script setup>
import { Vue3SeamlessScroll } from "vue3-seamless-scroll"
import VisualLive from '@/view/visual/components/VisualLive.vue'

const props = defineProps({
    liveData: {
        type: Array,
        default: []
    }
})

// 显示直播
let visualLive = $ref(null)

let list = $ref(props.liveData)


 // 显示直播
let showVideo = $ref(false)
const showLive = ({ numb, aisle, appkey }) => {
    showVideo = true
    visualLive.showLiveDialog({numb, aisle, appkey})
}


</script>

<template>
    <div class="home-live-list">
        <div class="live-list">
            <vue3-seamless-scroll 
                :list="list" 
                direction="left"
                class="event-list"
                hover
                :singleWidth="262"
                :singleWaitTime="3000"
                :limitScrollNum="4"
            >
                <div class="live-item" v-for="(item, index) in list" :key="index">
                    <img :src="item.image">
                    <img src="../../../assets/images/video-icon.png" class="video-icon" @click="showLive(item)">
                </div>
            </vue3-seamless-scroll>
        </div>

        <div class="live-fixed" v-show="showVideo">
            <visual-live ref="visualLive" @closeLive="showVideo = false"></visual-live>
        </div>
    </div>
</template>

<style lang="less">
    .home-live-list{
        width: 100%;
        height: 300px;
        margin-top: 18px;
        background: url('../../../assets/images/live-bg.png') center no-repeat;
        background-size: 100% 100%;

        .event-list{
            height: 240px;
            overflow: hidden;

            &>div{
                width: 99999px !important;
            }
        }

        .live-list{
            padding: 30px 0;
            margin: 0 10px;
            overflow: hidden;

            .live-item{
                width: 252px;
                height: 240px;
                display: inline-block ;
                background: #999;
                margin-left: 10px;
                position: relative;

                img{
                    width: 100%;
                    height: 100%;
                }

                .video-icon{
                    width: 32px;
                    height: 32px;
                    position: absolute;
                    bottom: 10px;
                    right: 10px;
                    cursor: pointer;
                    transition: all .3s;

                    &:hover{
                        transform: scale(1.2);
                    }
                }
            }
        }

        .live-fixed{
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 99;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
</style>